<template>
  <div v-if="visible">
    <el-dialog :visible.sync="visible"
               :title="'指纹' + '(' + dataForm.realName + ' ' + dataForm.username + ')'"
               :modal="false"
               class="user-dialog add-or-updata"
               width="35%"
               :before-close="closeDialog"
               :close-on-click-modal="false"
               :close-on-press-escape="false">
      <div style="display: block;text-align: right;">
        <el-button type='primary'
                   plain
                   @click='syncFingerprint()'>同步指纹</el-button>
        <el-button v-if="false"
                   type='primary'
                   plain
                   @click='addWin()'>采集指纹</el-button>
      </div>
      <div class="info">
        <div><span>指纹采集程序下载安装说明:</span></div>
        <div><span>首先请确认你已下载过驱动程序。&nbsp;&nbsp;&nbsp;<el-link type="primary"
                     :href='url + "/kaijin/setup.exe"'
                     :underline="false">中控指纹传感器驱动下载</el-link></span></div>
        <div><span>然后下载配套的指纹采集/核验程序&nbsp;&nbsp;&nbsp;<el-link type="primary"
                     :href='url + "/kaijin/check-fingerprint.zip"'
                     :underline="false">下载</el-link><span style="color: #ccc;margin-left: 20px">说明: 解压后运行'check-fingerprint.exe'</span></span></div>
      </div>
      <table-template :tableData='tableData'
                      :loading='dataListLoading'
                      :fieldManagement='false'
                      :index='true'
                      :dataList='dataList'>
        <el-table-column :label="$t('handle')"
                         fixed="right"
                         header-align="center"
                         align="center"
                         width="80">
          <template slot-scope="scope">
            <el-button type='text'
                       class='danger'
                       @click='deleteHandle({id:scope.row.id,callBack: getTable })'
                       size='small'>删除</el-button>
          </template>
        </el-table-column>
      </table-template>
      <el-pagination :current-page='page'
                     :page-sizes='[10,20,50,100]'
                     :total='total'
                     layout='total, sizes, prev, pager, next'
                     @size-change='pageSizeChangeHandle'
                     @current-change='pageCurrentChangeHandle'>
      </el-pagination>
      <template slot="footer">
        <el-button @click="closeDialog()">关闭</el-button>
        <!-- <el-button type="primary"
                   :loading="dataListLoading"
                   @click="closeDialog()">{{ $t("confirm") }}</el-button> -->
      </template>
    </el-dialog>
    <usersyncFingerprint ref="usersyncFingerprint"
                         @callBack="getTable" />
    <usercollectionFingerprint ref="usercollectionFingerprint"
                               @callBack="getTable" />
  </div>
</template>

<script>
import mixinViewModule from '@/mixins/view-module'
import minFormValidate from '@/mixins/form-validate'
import fileUpload from '@/components/file-upload/file-upload'
import tableTemplate from '@/components/table-template'
import usersyncFingerprint from './user-syncFingerprint.vue'
import usercollectionFingerprint from './user-collectionFingerprint.vue'
export default {
  mixins: [mixinViewModule, minFormValidate],
  data () {
    return {
      mixinViewModuleOptions: {
        getDataListURL: '', // 数据列表接口，API地址
        getDataListIsPage: true, // 数据列表接口，是否需要分页？
        addURL: '', // 添加或修改接口，API地址
        updateURL: '', // 添加或修改接口，API地址
        getDataInfoURL: '', // 数据详情，API地址
        deleteURL: 'system/sysUserFinGerPrint', // 删除接口，API地址
        deleteIsBatch: true, // 删除接口，是否需要批量？
        exportURL: '' // 导出接口，API地址
      },
      visible: false,
      dataForm: {
        userId: ''
      },
      url: '',
      page: 1,
      pageSize: 10
    }
  },
  computed: {
    tableData () {
      return [
        { label: '指纹名称', width: '100', prop: 'name' },
        { label: '设备品牌', width: '100', prop: 'brandName' },
        { label: '创建人', width: '100', prop: 'creatorName' },
        { label: '创建时间', width: '150', prop: 'createDate' }
      ]
    }
  },
  components: { fileUpload, tableTemplate, usersyncFingerprint, usercollectionFingerprint },
  methods: {
    init (data) {
      if (data) {
        this.dataForm = data
      }
      this.$http.get('/system/oss/getMinIoConfig').then(({ data: res }) => {
        if (res.code !== 0) {
          return this.$message.error('获取资源失败')
        }
        this.url = res.data
      })
      this.visible = true
      this.$nextTick(() => {
        if (this.dataForm.id) {
          this.getTable()
        }
      })
    },
    getTable () {
      let arr = {}
      arr.userId = this.dataForm.id
      arr.page = this.page
      arr.pageSize = this.pageSize
      this.getDataList({ url: 'system/sysUserFinGerPrint/queryPage', paramData: arr }).then(res => {
        if (res.code !== 0) {
          return this.$message.error(res.msg)
        }
        this.page = res.data.page
        this.total = res.data.total
        this.dataList = res.data.data
      })
    },
    pageSizeChangeHandle (val, fn) {
      this.pageSize = val
      if (fn) {
        fn()
      } else {
        this.getTable()
      }
      return Promise.resolve()
    },
    pageCurrentChangeHandle (val, fn) {
      this.page = val
      if (fn) {
        fn()
      } else {
        this.getTable()
      }
      return Promise.resolve()
    },
    closeDialog () {
    //   this.$refs.dataForm.resetFields()
      this.dataForm.userId = ''
      this.dataList = []
      this.total = 10
      this.page = 1
      this.$emit('callBack')
      this.visible = false
    },
    syncFingerprint () {
      this.$refs.usersyncFingerprint.init(this.dataForm.id)
    },
    addWin () {
      this.$refs.usercollectionFingerprint.init(this.dataForm.id)
    }
  }
}
</script>

<style lang="scss" scoped>
.info {
  padding: 5px;
  border-left: 6px solid #1995ec;
  margin-bottom: 5px;
}
</style>
